import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/takeWhile';  // 方式3：利用RxJS BehaviorSubject
import { Post, GroupPosts } from './post.interface';

@Component({
    selector: 'app-posts',
    template: `
    <div class="list-group">
        <div *ngFor="let group of groupPosts;" class="list-group-item">
            <h4>{{ group.category }}</h4>
            <ul>
                <li *ngFor="let post of group.posts">
                    {{ post.title }}
                </li>
            </ul>
        <div>
    </div>
    `
})
// export class PostsComponent implements OnInit, OnChanges {

//     @Input()
//     data: Post[];

//     groupPosts: GroupPosts[];

//     ngOnInit() {
//       // 方式1：使用 *ngIf 指令延迟 exe-posts 组件的初始化
//       // this.groupPosts = this.groupByCategory(this.data);
//     }

//     ngOnChanges(changes: SimpleChanges) {
//       // 当数据绑定输入属性的值发生变化的时候，Angular 将会主动调用 ngOnChanges() 方法。
//       // 它会获得一个 SimpleChanges 对象，包含绑定属性的新值和旧值，因此我们可以利用 ngOnChanges() 钩子，执行 groupPosts 的数据初始化操作。
//         console.dir(changes);
//         // 获取到了两次chages: 第一次为undefined, 第二次为：当前值数组， 旧值为undefined;
//         if (changes['data']) {
//           this.groupPosts = this.groupByCategory(this.data);
//         }
//     }

//     groupByCategory(data: Post[]): GroupPosts[] {
//         if (!data) {
//            return;
//           }

//         // 获取目录名，使用ES6中Set进行去重处理
//         const categories = new Set(data.map(x => x.category));

//         // 重新生成二维数组，用于页面显示
//         const result = Array.from(categories).map(x => ({
//             category: x,
//             posts: data.filter(post => post.category === x)
//         }));
//         return result;
//     }
// }
export class PostsComponent implements OnInit, OnChanges {
      private _data$ = new BehaviorSubject<Post[]>([]);

      @Input()
      set data(value: Post[]) {
          this._data$.next(value);
      }

      get data(): Post[] {
          return this._data$.getValue();
      }

      groupPosts: GroupPosts[];

      ngOnInit() {
          this._data$
              // 当this.groupPosts有值的时候，会自动取消订阅
              .takeWhile(() => !this.groupPosts)
              .subscribe(x => {
                  this.groupPosts = this.groupByCategory(this.data);
              });
      }

      ngOnChanges(changes: SimpleChanges) { }

      groupByCategory(data: Post[]): GroupPosts[] {
          if (!data) {
            return;
          }

          // 获取目录名，使用ES6中Set进行去重处理
          const categories = new Set(data.map(x => x.category));

          // 重新生成二维数组，用于页面显示
          const result = Array.from(categories).map(x => ({
              category: x,
              posts: data.filter(post => post.category === x)
          }));
          return result;
      }
}
